<template>
  <div class="add-account-allocation">
    <a-modal
      class="loading"
      :visible="visible"
      width="50%"
      title="学院分配"
      @cancel="handleClose"
      @ok="handleOk"
    >
      <a-form class="form" :model="allocationForm" :rules="rules" ref="addFrom">
        <a-form-item label="学院" name="todoList">
          <a-select
            allowClear
            mode="multiple"
            v-model:value="allocationForm.todoList"
            placeholder="请选择学院"
            :options="xyOptions"
            :fieldNames="{ label: 'xymcAn', value: 'xydm' }"
          ></a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, watch, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getXyListApi, setButeXyForManage } from '/@/api/system-manage/account-allocation'

const props = defineProps({
  visible: {
    type: Boolean,
  },
  account: {
    type: String,
    default: '',
  },
})

const xyOptions = ref<any>([])

watch(
  () => props.account,
  val => {
    if (val) {
      xyOptions.value = []
      getXyList(val) // 当前管理员获取学院列表
      getXyList(undefined) //获取未分配的学院列表
    }
  },
  { immediate: true }
)

/**
 * 获取学院列表
 * */
async function getXyList(account) {
  const { code, data } = await getXyListApi({ account })
  if (code === 200) {
    data.filter(item => {
      item.xymcAn = `${item.xydm}(${item.xymc})`
      xyOptions.value.push(item)
    })
    if (account) {
      allocationForm.value.todoList = data.map(item => item.xydm)
    }
  }
}

const addFrom = ref()
const allocationForm = ref({ todoList: [] })

const rules = {}

const $emit = defineEmits(['update:visible', 'update:account'])

const handleClose = () => {
  addFrom.value.resetFields()
  $emit('update:visible', false)
  $emit('update:account', '')
}

const handleOk = async () => {
  const { code, message: messageStr } = await setButeXyForManage({
    ...allocationForm.value,
    bindingValue: props.account,
  })
  if (code === 200) {
    message.success('分配成功')
    handleClose()
  } else {
    message.error(messageStr)
  }
}

onMounted(() => {})
</script>
<style lang="less" scoped>
.form {
  width: 100%;
  padding: 20px 16px 0 16px;
}
</style>
<style lang="less">
.loading {
  .ant-modal-header {
    background-color: #3e456b;
  }

  .ant-modal-title,
  .ant-modal-close-icon {
    color: #fff;
  }

  .ant-modal-body {
    padding: 10px !important;
    // display: flex;
    // height: 100% !important;
  }

  .ant-radio-inner {
    border-radius: 0 !important;
  }
}
</style>
